<template>
    <div class="login-reg">
        <!-- 顶部导航 -->
        <nav-top-bar :title="type === 1 ? '登录' : '注册'" />
        <div class="logo">
            <img
                src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png"
                alt=""
            />
        </div>
        <!-- 登录注册表单 -->
        <van-form class="form" @submit="onSubmit">
            <van-field
                v-model="loginName"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />

            <van-field
                v-model="verify"
                type="verify"
                name="验证码"
                label="验证码"
                placeholder="验证码"
                :rules="[{ required: true, message: '请填写验证码' }]"
            >
                <template #button>
                    <VueImageVerify ref="verifyRef" />
                </template>
            </van-field>

            <div style="margin: 16px">
                <div class="link-register" @click="change">
                    {{ type === 2 ? "已有帐号立即登录" : "立即注册" }}
                </div>
                <van-button
                    round
                    block
                    color="#1baeae"
                    type="primary"
                    native-type="submit"
                >
                    {{ type === 1 ? "登录" : "注册" }}
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import loginHook from "./hook/login";
import VueImageVerify from "../../components/VueImageVerify.vue";
export default defineComponent({
    components: { VueImageVerify },
    setup() {
        const {
            loginName,
            password,
            verifyRef,
            verify,
            type,
            onSubmit,
            rest,
            change
        } = loginHook();
        return {
            loginName,
            password,
            verifyRef,
            verify,
            type,
            onSubmit,
            rest,
            change
        };
    },
});
</script>

<style lang="scss" scoped>
.logo {
    text-align: center;
    img {
        width: 120px;
        height: 120px;
        margin: 80px auto 40px;
    }
}
.form {
    padding: 0 20px;
}
.link-register {
    margin-bottom: 10px;
    color: #1989fa;
    display: inline-block;
}
</style>
